<template>
    <div class="container-box">
        <div style="height: 98px;"></div>
        <!-- serch -->
        <div class="bgfffs filter_box" :style="contentStyleObj">
            <page-filter :className="className" lableWidth="70px" ref="from" :query.sync="filterInfo.query"
                :filter-list="filterInfo.list" :list-type-info="listTypeInfo" @handleClick="handleClick"
                @handleEvent="handleEvent" @upenter="upenter">
            </page-filter>
        </div>

        <div class="bgfff">
            <div class="btn-div" style="margin-left: 10px;">
                <el-button class="btn-middle" type="primary" @click="apply" size="mini">申请发票</el-button>
            </div>
            <div class="tableHeight" ref="tableWrapper" style="padding: 10px 10px">
                <page-table :checkBox="false" ref="table" :tabIndex="true" :dataText="dataText" v-loading="loading"
                    :init-curpage="tableInfo.initCurpage" :data.sync="tableInfo.data" :pageParm="pageParm"
                    showRow="invoice" :query="filterInfo.query" :field-list="tableInfo.fieldList"
                    :list-type-info="listTypeInfo" :showSummary="showSummary" :getSummaries="getSummaries"
                    :handle="tableInfo.handle" @handleClick="handleClick" @handleEvent="handleEvent">
                    <!-- 下载发票 -->
                    <template v-slot:col-file="scope">
                        <i v-if="scope.row.file.length != 0" class="el-icon-picture addicon"
                            @click.stop="openFile(scope.row.file[0].url)"></i>
                        <p v-else> - </p>
                    </template>
                    <!-- 类型 -->
                    <template v-slot:col-invoice_type="scope">
                        <span v-if="scope.row.invoice_type == 0">
                            普票
                        </span>
                        <span v-else>专票</span>
                    </template>
                    <template v-slot:col-name="scope">
                        <div slot="reference" style="cursor: pointer;color: #409eff;" @click="billDetail(scope.row)">
                            {{ scope.row.name }}
                            <i class="el-icon-s-order"></i>
                        </div>
                    </template>
                    <template v-slot:col-pay_amount="scope">
                        <span v-if="scope.row.pay_amount != '0.00'">
                            {{ scope.row.pay_amount }}
                        </span>
                        <span v-else>-</span>
                    </template>
                </page-table>
            </div>
        </div>

        <page-dialog :class="{ 'dialogCss': dialogInfo.type == 'billInfo' }" :title="dialogInfo.title[dialogInfo.type]"
            :visible.sync="dialogInfo.visible" :width="dialogInfo.width" :bt-loading="dialogInfo.btLoading"
            :bt-list="dialogInfo.type === 'invoiceconfirm' || dialogInfo.type === 'applyInvoice' ? dialogInfo.btList2 : dialogInfo.btList"
            @handleClick="handleClick" @handleEvent="handleEvent" @closeevent="closeevent">
            <template v-slot>
                <!-- 开票信息 -->
                <div v-if="dialogInfo.type == 'billInfo'">
                    <div>开票金额：{{ billInfo.billAmount }}元</div>
                    <div style="margin-top: 5px;margin-bottom: 10px;">开票税率：{{ billInfo.billTax }}</div>
                    <page-table :dataText="dataText" :tabIndex="true" :checkBox="false" :pager="false"
                        :init-curpage="tableInfo3.initCurpage" :data.sync="tableInfo3.data" :query="filterInfo.query"
                        :field-list="tableInfo3.fieldList" :list-type-info="listTypeInfo">
                        <template v-slot:col-tax_ratio="scope">
                            <span>
                                {{ scope.row.tax_ratio }}%
                            </span>
                        </template>
                    </page-table>
                    <!-- 发票信息 -->
                    <div style="margin-top: 20px;">
                        <div style="margin: 5px;">发票信息：</div>
                        <div style="border: 1px solid gainsboro;margin-top: 6px;padding:15px;">
                            <div style="padding: 5px;display: flex;">
                                <div style="width: 35%;">公司名称：{{ billInfo.company }}</div>
                                <div style="width: 50%;">税号：{{ billInfo.tax_number }}</div>
                            </div>
                            <div style="padding: 5px;">
                                <div>注册地址：{{ billInfo.address }}</div>
                            </div>
                            <div style="padding: 5px;display: flex;">
                                <div style="width: 35%;">开户行：{{ billInfo.bank_name }}</div>
                                <div style="width: 50%;">账号：{{ billInfo.bank_account }}</div>
                            </div>

                        </div>
                    </div>

                    <!-- 发票明细 -->
                    <div style="margin-top: 20px;" v-show="show">
                        <div style="margin: 5px;">发票明细：</div>
                        <div style="border: 1px solid gainsboro;margin-top: 6px;padding:15px;">
                            <div style="padding: 5px;display: flex;">
                                <div style="width: 35%;">车牌号：{{ billInfo.car_number }}</div>
                                <div style="width: 50%;">货物名称：{{ billInfo.goods }}</div>
                            </div>
                            <div style="padding: 5px;display: flex;">
                                <div style="width: 35%;">起始点：{{ billInfo.start_address }}</div>
                                <div style="width: 50%;">目的地：{{ billInfo.end_address }}</div>
                            </div>

                        </div>
                    </div>

                    <div>
                        <div style="margin-top: 20px;">备注：{{ billInfo.remark }}</div>
                    </div>


                </div>
                <!-- 上传发票 -->
                <div v-if="dialogInfo.type == 'invoiceUpload'">
                    <el-upload class="upload-demo" drag ref="upload" :http-request="goRequest"
                        :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" action="" multiple
                        :limit="5" :file-list="enclosure">
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到框线区域或<em>点击上传</em></div>
                    </el-upload>
                </div>
                <!-- 申请开票 -->
                <div v-if="dialogInfo.type == 'applyInvoice'">
                    <div class="bgfffs" :style="contentStyleObj">
                        <page-filter :className="className" lableWidth="65px" ref="from" :query.sync="filterInfo2.query"
                            :filter-list="filterInfo2.list" :list-type-info="listTypeInfo2" @handleClick="handleClick"
                            @handleEvent="handleEvent" @upenter="upenter">
                        </page-filter>
                    </div>
                    <page-table :dataText="dataText" :tabIndex="true" :checkBox="true" :pager="false" ref="table2"
                        :init-curpage="tableInfo2.initCurpage" :data.sync="tableInfo2.data" :pageParm="pageParm2"
                        :show-summary="showSummary" :getSummaries="getApplySummaries" :query="filterInfo.query"
                        :field-list="tableInfo2.fieldList" :list-type-info="listTypeInfo" @handleClick="handleClick"
                        @handleEvent="handleEvent" showRow="paymentapply">
                        <!-- 开票状态 -->
                        <template v-slot:col-invoice_status="scope">
                            <span v-if="scope.row.invoice_status == 0">
                                未开票
                            </span>
                            <span v-else>已开票</span>
                        </template>
                        <template v-slot:col-tax_ratio="scope">
                            <span>
                                {{ scope.row.tax_ratio }}%
                            </span>
                        </template>
                    </page-table>
                    <div style="margin-top: 10px;" v-show="relation">
                        <div><el-checkbox v-model="checked">关联同提单号下的所有运杂费</el-checkbox> </div>
                    </div>

                    <div style="border: 1px solid gainsboro;margin-top: 6px;">
                        <el-tag v-for="tag in relationMixedCost" :key="tag.name" closable :type="tag.type"
                            @close="handleClose(tag)" style="margin:5px 6px">
                            {{ tag.name }}
                        </el-tag>
                    </div>
                    <div style="margin-top: 10px;color: red;">开票金额：{{ billAmount.toFixed(2) }}</div>
                </div>
                <!-- 确认开票 -->
                <div v-if="dialogInfo.type == 'invoiceconfirm'">
                    <div>开票金额：{{ billAmount.toFixed(2) }} 元</div>
                    <div style="margin-top: 5px;margin-bottom: 10px;">开票税率：{{ billTax }}%
                        <span v-if="billType == 0">普票</span><span v-else>专票</span>
                    </div>
                    <page-table :dataText="dataText" :tabIndex="true" :checkBox="false" :pager="false"
                        :init-curpage="tableInfo3.initCurpage" :data.sync="tableInfo3.data" :pageParm="pageParm2"
                        :query="filterInfo.query" :field-list="tableInfo3.fieldList" :list-type-info="listTypeInfo"
                        @handleEvent="tableHandleEvent" :handle="tableInfo3.handle" @handleClick="handleClick">
                        <template v-slot:col-tax_ratio="scope">
                            <span>
                                {{ scope.row.tax_ratio }}%
                            </span>
                        </template>
                    </page-table>
                    <!-- 发票信息 -->
                    <div style="margin-top: 20px;">
                        <span style="margin: 5px;">发票信息：</span>
                        <el-form :inline="true"
                            style="border: 1px solid gainsboro;margin-top: 6px;padding:15px;display: flex; border-radius: 6px; background: linear-gradient(rgb(237, 242, 254), rgb(249, 252, 255));">
                            <div class="plant-item-left" style="margin-right: 20px;">
                                <div class="item-left-info">
                                    <div class="height-center">
                                        <img class="hint" src="@/assets/image/hint.svg" alt="">
                                        <span>复制发票信息自动识别，识别失败请手动填写</span>
                                    </div>
                                </div>
                                <div class="item-left-address">
                                    <el-input type="textarea" @input="debouncedOnSubmit" class="recognition"
                                        :autosize="{ minRows: 5, maxRows: 5 }" resize="none"
                                        v-model="invociceInfo"></el-input>
                                </div>
                            </div>
                            <div style="margin-top: 8px;">
                                <div style="text-align: right;"><el-button size="mini" color="#165DFF" type="primary"
                                    @click="historyInvoice()">常用发票抬头</el-button>
                                </div>
                                <div>
                                    <el-form-item label="公司名称：" label-width="70px">
                                        <el-input v-model="invoiceForm.name" style="width: 450px;"></el-input>
                                    </el-form-item>
                                </div>
                                <div>
                                    <el-form-item label="税号：" label-width="70px">
                                        <el-input v-model="invoiceForm.tax_number" style="width: 450px;"></el-input>
                                    </el-form-item>
                                </div>
                                <div>
                                    <el-form-item label="注册地址：" label-width="70px">
                                        <el-input v-model="invoiceForm.address" style="width: 450px;"></el-input>
                                    </el-form-item>
                                </div>
                                <div>
                                    <el-form-item label="开户行：" label-width="70px">
                                        <el-input v-model="invoiceForm.bank_name" style="width: 450px;"></el-input>
                                    </el-form-item>
                                </div>
                                <div>
                                    <el-form-item label="账号：" label-width="70px">
                                        <el-input v-model="invoiceForm.bank_account" style="width: 450px;"></el-input>
                                    </el-form-item>
                                </div>
                            </div>
                        </el-form>
                    </div>
                    <!-- 发票明细 -->
                    <div style="margin-top: 20px;" v-show="show">
                        <span>发票明细</span>
                        <el-form style="border: 1px solid gainsboro;margin-top: 6px; padding:15px;" :inline="true">
                            <div>
                                <el-form-item label="车牌号：">
                                    <el-input v-model="invoiceForm.car_number"></el-input>
                                </el-form-item>
                                <el-form-item label="货物名称：" style="margin-left: 20px;" label-width="70px">
                                    <el-input v-model="invoiceForm.goods"></el-input>
                                </el-form-item>
                            </div>
                            <div>
                                <el-form-item label="起始点：">
                                    <el-input v-model="invoiceForm.start_address"></el-input>
                                </el-form-item>
                                <el-form-item label="目的地：" style="margin-left: 20px;" label-width="70px">
                                    <el-input v-model="invoiceForm.end_address"></el-input>
                                </el-form-item>
                            </div>

                        </el-form>
                    </div>
                    <div>
                        <div style="margin-top: 20px;">备注：</div>
                        <el-form>
                            <el-form-item>
                                <el-input v-model="invoiceForm.remark"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>


                </div>

            </template>
        </page-dialog>
        <!-- 历史发票信息 -->
        <el-dialog title="常用发票抬头" :close-on-click-modal="false"  :visible.sync="dialogInvoiceRecord"
            width="70%">
            <el-table :data="historyInfo" style="font-size: 12px;">
                <el-table-column property="name" label="公司名称" width="150" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.name || '--' }}
                    </template>
                </el-table-column>
                <el-table-column property="tax_number" label="税号" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.tax_number || '--' }}
                    </template>
                </el-table-column>
                <el-table-column property="address" label="注册地址" width="200" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.address || '--' }}
                    </template>
                </el-table-column>
                <el-table-column property="bank_name" label="开户行" width="120" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.bank_name || '--' }}
                    </template>
                </el-table-column>
                <el-table-column property="bank_account" label="账号" width="180" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.bank_account || '--' }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleButtonClick(scope.row)">选择</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </el-dialog>
    </div>
</template>

<script>

import PageDialog from "@/components/PageDialog";
import PageFilter from "@/components/PageFilter/index";
import PageTable from "@/components/PageTable/index";
import { formatter } from "@/utils/index";
import {
    getInvoiceList,// 列表
    getInvoiceParam,// 发票基础参数
    invoiceDetail,// 发票详情
    uploadInvoice,// 上传发票
    getApplyParam,//申请开票
    paymentApplyList,//申请开票列表
    paymentOtherAmount, //申请开票 费用名称是运费时获取其它运杂费
    confirmInvoice,//确认开票
    revokeInvoice,//撤销开票
    identifyInfo,//发票识别
    getHistoryInvoice,//历史发票记录信息
} from '@/api/bill';
import {
    fileUpload,// 照片上传
} from '@/api/api'
export default {
    name: "paymentPage",
    components: {
        PageFilter,
        PageDialog,
        PageTable
    },
    data () {
        return {
            invociceInfo: '',
            id: 0,
            fullYear: new Date().getFullYear(),
            month: new Date().getMonth() + 1,
            loading: false,
            is_modify_tax: 0,
            billLading: '',
            addId: [],
            dataText: "",
            showSummary: false,
            amount_total: 0,
            pay_amount_total: 0,
            settlement_time: "",
            contentStyleObj: {
                height: "100%"
            },
            refresh: false,
            relation: false,
            checked: false,
            relationMixedCost: [],
            billAmount: 0,
            billTax: '',
            billType: 0,
            tax_list: [],//税率可选项
            show: false,
            enclosure: [],
            dialogInvoiceRecord: false,
            historyInfo: [],
            billInfo: {
                billAmount: 0,
                billTax: "",
                company: "",//发票信息 公司名称
                tax_number: "",//发票信息 税号
                address: "",//发票信息 注册地址
                bank_name: "",//发票信息 开户行
                bank_account: "",//发票信息 账号
                car_number: "",//发票明细 车牌号
                goods: "",//发票明细 货物名称
                start_address: "",//发票明细 起始点
                end_address: "",//发票明细 目的地
                remark: "",
            },
            invoiceForm: {
                settlement_time: "",//结算账期
                tax_ratio: "",//税率
                invoice_type: 0,//发票类型
                amount: "",//开票金额
                task: [],//任务信息
                name: "",
                tax_number: "",
                address: '',
                bank_name: '',
                bank_account: '',
                car_number: "",
                goods: "",
                start_address: "",
                end_address: "",
                remark: "",
                group_id: ""
            },
            className: "forms",
            // 相关列表
            listTypeInfo: {
                group_id_list: [],
                tax_ratio_list: [], //发票税率
                status_list: [], //开票状态
                name_list: [], //发布企业
            },
            // 相关列表
            listTypeInfo2: {
                group_id_list: [], //发布企业
                tax_ratio_list: [], //发票税率
                amount_name_list: [], //费用名称
            },

            // 弹窗相关
            dialogInfo: {
                width: "900px",
                title: {
                    billInfo: "发票信息",
                    invoiceUpload: "上传发票",
                    applyInvoice: "申请开票",
                    invoiceconfirm: "确认开票"
                },
                visible: false,
                type: "",
                btLoading: false,
                btList: [
                    {
                        label: "确定",
                        event: "save",
                        type: "primary",
                        show: true
                    }

                ],
                btList2: [
                    {
                        label: "取消",
                        event: "close",
                        show: true
                    },
                    {
                        label: "确定",
                        type: "primary",
                        event: "save",
                        show: true
                    }
                ]
            },
            // 过滤相关配置
            filterInfo: {
                query: {
                    page: 1,
                    limit: 20,
                    group_id: "",
                    tax_ratio: "",
                    status: "",
                    name: "",
                    start_time: "",
                    end_time: ""
                },
                list: [
                    {
                        type: "select",
                        label: "发布企业",
                        value: "group_id",
                        list: "group_id_list",
                        key: "发布企业"
                    },
                    {
                        type: "select",
                        label: "税率",
                        value: "tax_ratio",
                        list: "tax_ratio_list",
                        key: "税率"
                    },
                    {
                        type: "timedate",
                        dateType: "date",
                        format: "yyyy-MM-dd",
                        label: "申请开始时间",
                        value: "start_time",
                        clearable: true,
                        key: "申请时间"
                    },
                    {
                        type: "timedate",
                        dateType: "date",
                        format: "yyyy-MM-dd",
                        label: "申请结束时间",
                        value: "end_time",
                        clearable: true,
                        key: "-"
                    },

                    {
                        type: "select",
                        label: "开票状态",
                        value: "status",
                        list: "status_list",
                        key: "开票状态",
                    },
                    {
                        type: "button",
                        label: "搜索",
                        btType: "primary",
                        event: "search",
                        show: true
                    },
                    {
                        type: "button",
                        label: "重置",
                        event: "reset",
                        show: true
                    }
                ]
            },
            // 分页参数
            pageParm: {
                tableHeight: "52vh", // 表格最大高度
                total: 0, // 总条数
                loading: true, // 加载动画
                pagesizes: [20, 50, 100], // 分页数量列表
                query: {
                    // 查询条件
                    page: 1, // 当前页
                    limit: 20 // 每页条数
                }
            },
            // 表格相关
            tableInfo: {
                refresh: 1,
                initCurpage: 1,
                data: [],
                fieldList: [
                    {
                        label: "申请时间",
                        value: "add_time",
                        width: "150px",
                    },

                    { label: "状态", value: "status_text", width: "100px" },
                    { label: "开票金额", value: "amount", width: "100px" },
                    { label: "发票税率", value: "tax_ratio", width: "100px" },

                    { label: "类型", value: "invoice_type", width: "100px", type: "slot" },
                    { label: "开票信息", value: "name", type: "slot" },
                    { label: "申请人", value: "admin_name", width: "100px" },
                    { label: "已收金额", value: "pay_amount", width: "100px", type: "slot" },
                    {
                        label: "完成时间",
                        value: "update_time",
                        width: "130px"
                    },
                    {
                        label: "操作人",
                        value: "update_admin_name",
                        width: "100px"
                    },
                    {
                        label: "下载发票",
                        value: "file",
                        type: "slot"
                    },
                ],
                handle: {
                    label: "操作",
                    width: "200px",
                    btList: [
                        {
                            label: "撤销",
                            type: "text",
                            icon: "el-icon-browse",
                            event: "revoke",
                            show: true,
                            ifRender: row => {
                                if (row.pay_amount == '0.00') {
                                    return true;
                                } else {
                                    return false;
                                }
                            }
                        },
                        {
                            label: "上传发票",
                            type: "text",
                            icon: "el-icon-browse",
                            event: "uploadInvoice",
                            show: true
                        },
                    ]
                },
            },
            // 过滤相关配置
            filterInfo2: {
                query: {
                    group_id: "",
                    settlement_time: "",
                    invoice_type_id: 1,
                    expense_id: 0,
                    status: "未开票",
                },
                list: [
                    {
                        type: "select",
                        label: "发布企业",
                        value: "group_id",
                        list: "group_id_list",
                        key: "发布企业",
                        clearable: true
                    },
                    {
                        type: "month",
                        dateType: "month",
                        format: "yyyy-MM",
                        label: "运费账期",
                        value: "settlement_time",
                        clearable: false,
                        key: "运费账期",
                    },
                    {
                        type: "select",
                        label: "税率：",
                        value: "invoice_type_id",
                        list: "tax_ratio_list",
                        key: "税率",
                        clearable: false
                    },
                    {
                        type: "select",
                        label: "费用名称",
                        value: "expense_id",
                        list: "amount_name_list",
                        key: "费用名称"
                    },
                    {
                        type: "button",
                        label: "搜索",
                        btType: "primary",
                        event: "search2",
                        show: true
                    },
                ]
            },
            pageParm2: {
                tableHeight: "", // 表格最大高度
                total: 0, // 总条数
                loading: true, // 加载动画
                pagesizes: [20, 50, 100], // 分页数量列表
                query: {
                    // 查询条件
                    // page: 1, // 当前页
                    // limit: 20 // 每页条数
                }
            },
            // 申请开票
            tableInfo2: {
                refresh: 1,
                initCurpage: 1,
                data: [],
                fieldList: [
                    {
                        label: "提单号",
                        value: "bill_lading_number",
                    },

                    { label: "开票状态", value: "invoice_status", width: "100px", type: "slot" },
                    { label: "箱型数量", value: "container", width: "120px" },
                    { label: "费用金额", value: "amount", width: "100px", },

                    { label: "税率", value: "tax_ratio", width: "100px", type: "slot" },
                ],
            },
            //确认开票
            tableInfo3: {
                refresh: 1,
                initCurpage: 1,
                data: [],
                fieldList: [
                    {
                        label: "提单号",
                        value: "bill_lading_number",
                        width: "100px",
                        fixed: true
                    },
                    { label: "箱型数量", value: "container", width: "100px" },
                    { label: "费用名称", value: "amount_type_text", width: "100px" },
                    { label: "费用金额", value: "amount" },

                    { label: "税率", value: "tax_ratio", width: "100px", type: "slot" },
                ],
                handle: {
                    label: "操作",
                    width: "200px",
                    btList: [
                        {
                            label: "移除",
                            type: "text",
                            icon: "el-icon-browse",
                            event: "remove",
                            show: true,
                        },
                    ]
                },
            }
        };
    },
    created () {

        //this.getonemonth();
        this.init({ ...this.pageParm.query, ...this.filterInfo.query });
        this.getParamList();
        // this.getHeight();
        this.fetTableHeight()
        this.upenter();
        //window.addEventListener("resize", this.getHeight);
    },
    //enter事件 与点击查询按钮功能一致
    updated () {
        var that = this;
    },
    activated () {
        this.init(this.filterInfo.query);
        this.getParamList();
        this.upenter();
        this.refresh = false;
    },
    deactivated () {
        this.refresh = true;
    },
    filters: {
        formatter (time) {
            let date = new Date(time),
                text = "";
            if (time !== "") return (text = formatter(date, "yyyy-MM"));
            return text;
        }
    },
    computed: {
    },
    watch: {
        checked (newValue) {
            //console.log('Checkbox is ' + (newValue ? 'checked' : 'unchecked'));
            let check = (newValue ? 'checked' : 'unchecked')
            if (check === 'checked') {
                if (this.addId.length > 0) {
                    let formData = new FormData();
                    formData.append('id', this.addId)
                    formData.append('group_id', this.filterInfo2.query.group_id)
                    paymentOtherAmount(formData).then(res => {
                        if (res.data.length != 0) {
                            res.data.forEach((v) => {
                                if (this.relationMixedCost.length > 0) {
                                    let checkStatus = 0;
                                    this.relationMixedCost.forEach((item) => {
                                        if (v.tc_id + '_' + v.amount_info_id === item.id) {
                                            checkStatus = 1;

                                        }
                                    })
                                    if (checkStatus != 1) {
                                        this.relationMixedCost.push({
                                            name: v.bill_lading_number + ' ' + v.amount_type_text + '：' + v.amount,
                                            type: 'info',
                                            tc_id: v.tc_id,
                                            bill_lading_number: v.bill_lading_number,
                                            container: v.container,
                                            amount_type_text: v.amount_type_text,
                                            amount_type: v.amount_type,
                                            amount: v.amount,
                                            tax_ratio: v.tax_ratio,
                                            id: v.tc_id + '_' + v.amount_info_id,
                                            amount_info_id: v.amount_info_id
                                        })
                                        this.billAmount += +v.amount

                                    }
                                } else {
                                    this.relationMixedCost.push({
                                        name: v.bill_lading_number + ' ' + v.amount_type_text + '：' + v.amount,
                                        type: 'info',
                                        tc_id: v.tc_id,
                                        bill_lading_number: v.bill_lading_number,
                                        container: v.container,
                                        amount_type_text: v.amount_type_text,
                                        amount_type: v.amount_type,
                                        amount: v.amount,
                                        tax_ratio: v.tax_ratio,
                                        id: v.tc_id + '_' + v.amount_info_id,
                                        amount_info_id: v.amount_info_id
                                    })
                                    this.billAmount += +v.amount
                                }

                            })
                        }

                    })
                }
            } else {
                if (this.relationMixedCost.length > 0) {
                    let relationMixedCost2 = []
                    this.billAmount = 0
                    this.relationMixedCost.forEach((value, key) => {
                        if (value.amount_type == 0) {
                            this.billAmount += +value.amount
                            relationMixedCost2.push(value)
                        }
                    })
                    this.relationMixedCost = relationMixedCost2
                }
            }
        }
    },

    methods: {
        handleAvatarSuccess (res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload (file) {
            const isLt3M = file.size / 1024 / 1024 < 5;
            if (!isLt3M) {
                this.$message.error('上传图片大小不能超过 5MB!');
            }
            // return isLt4M;
            // console.log(file, '1111111');
            if (isLt3M) {
                this.imageError = false
                this.upload_line = true
                const intervalId = setInterval(() => {
                    if (this.dataNumber < 95) {
                        this.dataNumber += 5
                    }
                    if (this.dataNumber >= 100) {
                        clearInterval(intervalId); // 停止定时器
                    }
                }, 1200);

                let formData = new FormData();
                formData.append("file", file);
                fileUpload(formData).then(res => {
                    console.log(res, '我是路径')
                    if (res.status == 200) {
                        let path = res.data.href
                        console.log(path, '我是path');

                        this.enclosure.push({
                            name: res.data.old_name,
                            url: res.data.href
                        });

                        //item.value = path
                        this.dataNumber = 100
                        setTimeout(() => {
                            this.upload_line = false
                            this.dataNumber = 10
                        }, 1000);
                    }
                }).catch(response => {
                    console.log('图片上传失败')
                    this.imageError = true
                    this.$message.error('图片上传失败，请重新上传');
                })
            }
        },
        tableHandleEvent () {

        },
        // 发票识别
        debouncedOnSubmit () {
            const formData = new FormData()
            formData.append('invoice', this.invociceInfo)
            identifyInfo(formData).then(res => {
                // console.log('我是识别信息', res);
                if (res.status == 200) {
                    for (const key in res.data) {
                        // 检查本地对象是否有相同的属性
                        if (this.invoiceForm.hasOwnProperty(key) && res.data[key]) {
                            // 赋值
                            this.invoiceForm[key] = res.data[key];
                            // this.$refs.ruleForm.clearValidate(key);

                        }
                    }
                    // console.log('我是发票的一些信息', this.invoiceForm);

                }

            })
        },
        goRequest () {
            console.log('上传成功');
        },
        billDetail (row) {
            this.dialogInfo.width = "900px";
            this.dialogInfo.type = "billInfo";
            this.dialogInfo.visible = true;
            let fomrData = new FormData();
            fomrData.append('id', row.id);
            invoiceDetail(fomrData).then(res => {
                this.billInfo.billAmount = res.data.amount
                let invoiceType = res.data.invoice_type == 1 ? '专票' : '普票'
                this.billInfo.billTax = res.data.tax_ratio + '%' + invoiceType
                this.tableInfo3.data = res.data.task
                this.billInfo.company = res.data.name
                this.billInfo.address = res.data.address
                this.billInfo.tax_number = res.data.tax_number
                this.billInfo.bank_name = res.data.bank_name
                this.billInfo.bank_account = res.data.bank_account
                this.billInfo.remark = res.data.remark
                if (res.data.tax_ratio == 9) this.show = true
                else this.show = false
                this.billInfo.car_number = res.data.car_number
                this.billInfo.goods = res.data.goods
                this.billInfo.start_address = res.data.start_address
                this.billInfo.end_address = res.data.end_address
            })

        },
        remove (file, fileList, index) {
            this.form.enclosure = fileList;
        },
        //申请开票
        apply () {
            this.invociceInfo = ''
            this.invoiceForm.name = ''
            this.invoiceForm.tax_number = ''
            this.invoiceForm.address = ''
            this.invoiceForm.bank_name = ''
            this.invoiceForm.bank_account = ''
            this.invoiceForm.remark = ''
            this.dialogInfo.width = "900px";
            this.dialogInfo.type = "applyInvoice";
            this.dialogInfo.visible = true;
            this.billAmount = 0;
            this.relationMixedCost = [];
            this.filterInfo2.query.expense_id = 0;
            this.filterInfo2.query.group_id = "";
            this.filterInfo2.query.invoice_type_id = 1;
            let date = new Date();
            this.settlement_time = date.getFullYear() + "-" + (date.getMonth() + 1);
            this.filterInfo2.query.settlement_time = this.settlement_time;
            getApplyParam().then(res => {
                let {
                    tax_ratio, //税率
                    amount_name, //费用名称
                    group_id,//发布企业
                } = res.data;
                tax_ratio = tax_ratio.map(v => {
                    return {
                        key: v.value,
                        value: v.name
                    };
                });

                amount_name = amount_name.map(v => {
                    return {
                        key: v.value,
                        value: v.name
                    };
                });
                group_id = group_id.map(v => {
                    return {
                        key: v.value,
                        value: v.name
                    };
                });
                this.listTypeInfo2.tax_ratio_list = tax_ratio;
                this.listTypeInfo2.amount_name_list = amount_name;
                this.listTypeInfo2.group_id_list = group_id;
                this.tax_list = res.data.tax_ratio
            });
            this.filterInfo2.query.group_id = this.filterInfo.query.group_id
            let queryData = new FormData();
            queryData.append('settlement_time', this.filterInfo2.query.settlement_time + '-01');
            queryData.append('invoice_type_id', this.filterInfo2.query.invoice_type_id);
            queryData.append('expense_id', this.filterInfo2.query.expense_id);
            queryData.append('status', 0);
            queryData.append('group_id', this.filterInfo2.query.group_id);
            paymentApplyList(queryData).then(res => {
                this.tableInfo2.data = [];
                this.tableInfo2.data = res.data.data;
                this.apply_amount_total = res.data.other_amount_total
                if (this.tableInfo2.data.length === 0) {
                    this.dataText = "暂无数据";
                    this.apply_amount_total = 0
                }
                this.loading = false;
            });
        },
        // 选择发票信息
        historyInvoice () {
            //this.getHistoryInvoice()
            this.dialogInvoiceRecord = true
        },
        getHistoryInvoice () {
            getHistoryInvoice().then(res => {
                if (res.status == 200) {
                    this.historyInfo = res.data.invoice_list
                }
            })
        },
        // 选择
        handleButtonClick (row) {
            this.invoiceForm.name = row.name
            this.invoiceForm.tax_number = row.tax_number
            this.invoiceForm.address = row.address
            this.invoiceForm.bank_name = row.bank_name
            this.invoiceForm.bank_account = row.bank_account
            this.dialogInvoiceRecord = false
        },

        closeevent () {
            if (this.dialogInfo.type == "invoice_info") {
                this.dialogInfo.btList[0].show = true;
                this.dialogInfo.btList[1].show = true;
            }
        },
        openFile (img) {
            console.log("--->", img);
            window.open(img, "_blank");
        },

        //合计
        getSummaries (param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 2) {
                    sums[index] = "合计：";
                    return;
                }
                if (index === 3) {
                    sums[index] = this.amount_total;
                    return;
                }
                if (index === 8) {
                    sums[index] = this.pay_amount_total;
                    return;
                }

            });
            this.$nextTick(() => {
                this.$refs.table.$refs.table.doLayout();
                this.$refs.table.$refs.table.bodyWrapper.scrollLeft = 0;
            });
            return sums;
        },
        getApplySummaries (param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 1) {
                    sums[index] = "合计";
                    return;
                }
                if (index === 5) {
                    sums[index] = this.apply_amount_total;
                    return;
                }
            });
            return sums;
        },
        handleClose (tag) {
            this.relationMixedCost.splice(this.relationMixedCost.indexOf(tag), 1);
            this.billAmount -= tag.amount
            let relationStatus = 0;
            for (let i = 0; i < this.relationMixedCost.length; i++) {
                if (this.relationMixedCost[i].amount_type == 1) {
                    relationStatus = 1;
                    break
                }
            }
            this.checked = relationStatus ? true : false

            if (this.filterInfo2.query.expense_id == 0) {
                this.tableInfo2.data.forEach((item, index) => {
                    if (tag.tc_id == item.tc_id) {
                        item.checked = false
                        this.$refs.table2.$refs.table.toggleRowSelection(item, false)
                    }
                })
            } else {
                this.tableInfo2.data.forEach((item, index) => {
                    if (tag.id == item.tc_id + '_' + item.amount_info_id) {
                        item.checked = false
                        this.$refs.table2.$refs.table.toggleRowSelection(item, false)
                    }
                })
            }
        },
        unique (arr) {
            const res = new Map();
            return arr.filter(a => !res.has(a) && res.set(a, 1));
        },
        arrayAminusB (arrA, arrB) {
            return arrA.filter(v => !arrB.includes(v));
        },
        //enter 事件防止全局触发
        upenter () {
            var that = this;
            document.onkeydown = e => {
                //13表示回车键，baseURI是当前页面的地址，为了更严谨，也可以加别的，可以打印e看一下
                if (e.keyCode === 13 && e.target.baseURI.match("receivableVerification") && !that.showInvoice && !that.showReconciliation && !that.showDestroy && !that.dialogInfo.visible) {
                    console.log("回车事件", that.dialogInfo.visible);
                    //回车后执行搜索方法
                    that.filterInfo.query.page = 1;
                    that.pageParm.query.page = 1;
                    that.init(that.filterInfo.query);
                }
            };
        },
        openWind () {
        },
        getHeight () {
            if (this.contentStyleObj.height == "100%") {
                console.log(parseInt(this.contentStyleObj.height), '99999999')
                var height =
                    window.innerHeight - 267;
            } else {
                var height =
                    window.innerHeight - parseInt(this.contentStyleObj.height) - 146;
            }
            this.pageParm.tableHeight = height + "px";
        },
        // 重置table高度
        resetHeight () {
            return new Promise((resolve, reject) => {
                this.tableH = 0
                resolve()
            })
        },
        // 设置table高度
        fetTableHeight () {
            this.resetHeight().then(res => {
                this.pageParm.tableHeight = this.$refs.tableWrapper.getBoundingClientRect().height - 64
                // 设置最小高度，确保表格可以正常显示
                // this.tableH = Math.max(containerHeight - 10, 200); // 最小300px
            })
        },
        //获取本月月初 月末
        // getonemonth() {
        //   var nowDate = new Date();
        //   var fullYear = nowDate.getFullYear();
        //   var month = nowDate.getMonth() + 1; // getMonth 方法返回 0-11，代表1-12月
        //   var endOfMonth = new Date(fullYear, month, 0).getDate(); // 获取本月最后一天

        //   this.settlement_time =  nowDate.getFullYear() + "-" + (nowDate.getMonth() + 1);
        //   this.filterInfo.query.settlement_time =  nowDate.getFullYear();
        // },
        //格式化年月日
        getFullDate (targetDate) {
            var D, y, m, d;
            if (targetDate) {
                D = new Date(targetDate);
                y = D.getFullYear();
                m = D.getMonth() + 1;
                d = D.getDate();
            } else {
                y = fullYear;
                m = month;
                d = date;
            }
            m = m > 9 ? m : "0" + m;
            d = d > 9 ? d : "0" + d;
            return y + "-" + m + "-" + d;
        },
        init (data) {
            this.loading = true;
            let formData = new FormData();
            formData.append('group_id', data.group_id);
            formData.append('start_time', data.start_time);
            formData.append('end_time', data.end_time);
            formData.append('status', data.status);
            formData.append('tax_ratio', data.tax_ratio);
            formData.append('name', data.name);
            formData.append('page', data.page);
            formData.append('limit', data.limit);
            getInvoiceList(formData).then(res => {
                this.showSummary = true;
                this.tableInfo.data = [];
                this.tableInfo.data = res.data.data;
                if (this.tableInfo.data.length === 0) {
                    this.dataText = "暂无数据";
                    this.amount_total = 0.00;
                    this.pay_amount_total = 0.00;
                }
                this.amount_total = res.data.other.total;
                this.pay_amount_total = res.data.other.pay_amount;
                this.pageParm.total = res.data.meta.total;
                this.loading = false;
            });

        },


        getCurrentDate () {
            const today = new Date();
            const year = today.getFullYear();
            const month = String(today.getMonth() + 1).padStart(2, '0');
            const day = String(today.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        getCurrentMonth () {
            const today = new Date();
            const year = today.getFullYear();
            const month = String(today.getMonth() + 1).padStart(2, '0');
            return `${year}-${month}`;
        },

        getParamList () {
            getInvoiceParam().then(res => {
                let {
                    group_id,
                    tax_ratio,
                    status, //开票状态
                    name, //开票公司

                } = res.data;

                group_id = group_id.map(v => {
                    return {
                        key: v.value,
                        value: v.name
                    };
                });

                tax_ratio = tax_ratio.map(v => {
                    return {
                        key: v.value,
                        value: v.name
                    };
                });
                status = status.map(v => {
                    return {
                        key: v.value,
                        value: v.name
                    };
                });
                name = name.map(v => {
                    return {
                        key: v.value,
                        value: v.name
                    };
                });
                this.listTypeInfo.group_id_list = group_id;
                this.listTypeInfo.tax_ratio_list = tax_ratio;
                this.listTypeInfo.status_list = status;
                this.listTypeInfo.name_list = name;
            });

        },

        handleClick (event, data) {
            console.log(event, data);
            console.log('当前事件---', event)
            switch (event) {
                case "uploadInvoice":
                    this.id = data.id
                    this.enclosure = [];
                    this.dialogInfo.width = "600px";
                    this.dialogInfo.type = "invoiceUpload";
                    this.dialogInfo.visible = true;
                    break;
                case "remove":
                    this.relationMixedCost.splice(this.relationMixedCost.indexOf(data), 1);
                    this.billAmount = 0;
                    this.relationMixedCost.forEach((v) => {
                        this.billAmount += + v.amount
                    })
                    break;
                case "revoke":
                    this.$confirm("确认撤销该开票信息吗？", "确认撤销", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                        .then(() => {
                            let formData = new FormData();
                            formData.append('id', data.id)
                            formData.append('group_id', data.group_id)
                            revokeInvoice(formData)
                                .then(res => {
                                    if (res.status == 200) {
                                        console.log('取消情况---', res.msg)
                                        this.$message({
                                            message: res.msg,
                                            type: "success"
                                        });
                                        this.init(this.filterInfo.query);
                                    }
                                })
                                .catch(() => { });
                        })
                        .catch(() => {
                            this.$message({
                                type: "info",
                                message: "已取消"
                            });
                        });
                    break;
                case "search":
                    this.pageParm.query.page = 1;
                    this.filterInfo.query.page = 1;
                    this.init(this.filterInfo.query);
                    break;
                case "reset":
                    for (let i in this.filterInfo.query) {
                        this.filterInfo.query[i] = "";
                    }
                    this.filterInfo.query.page = 1;
                    this.filterInfo.query.limit = 20;
                    this.pageParm.query.page = 1;
                    this.pageParm.query.limit = 20;
                    let datas = {};
                    datas = Object.assign({}, this.pageParm.query, this.filterInfo.query);
                    this.init(datas);
                    break;
                case "search2":
                    if (this.filterInfo2.query.group_id == "") {
                        this.$message({
                            type: "error",
                            message: "请选择发布企业！"
                        });
                        this.dialogInfo.btLoading = false;
                        return
                    }
                    if (this.filterInfo2.query.expense_id == 0) this.relation = true
                    else this.relation = false
                    this.relationMixedCost = []
                    this.billAmount = 0
                    this.checked = false

                    let queryData = new FormData();
                    queryData.append('settlement_time', this.filterInfo2.query.settlement_time + '-01');
                    queryData.append('invoice_type_id', this.filterInfo2.query.invoice_type_id);
                    queryData.append('expense_id', this.filterInfo2.query.expense_id);
                    queryData.append('status', 0);
                    queryData.append('group_id', this.filterInfo2.query.group_id);
                    paymentApplyList(queryData).then(res => {
                        this.tableInfo2.data = [];
                        this.tableInfo2.data = res.data.data;
                        this.apply_amount_total = res.data.other_amount_total
                        if (this.tableInfo2.data.length === 0) {
                            this.dataText = "暂无数据";
                            this.apply_amount_total = 0
                        }
                        this.loading = false;
                    });
                    break;
                case "save":
                    if (this.dialogInfo.type == "invoiceUpload") {
                        if (!this.enclosure[0]) {
                            this.$message.warning("上传发票！");
                            return;
                        }
                        let formData = new FormData();
                        formData.append('id', this.id)
                        formData.append('file[0][name]', this.enclosure[0].name)
                        formData.append('file[0][url]', this.enclosure[0].url)
                        uploadInvoice(formData).then(res => {
                            if (res.status == 200) {
                                this.$message({
                                    type: "success",
                                    message: res.msg
                                });
                                this.enclosure = [];
                                this.pageParm.query.page = 1;
                                this.filterInfo.query.page = 1;
                                this.init(this.filterInfo.query);
                            }
                        })
                        this.dialogInfo.btLoading = false;
                        this.dialogInfo.visible = false;
                    }
                    if (this.dialogInfo.type == "applyInvoice" || this.dialogInfo.type == "invoiceconfirm") {
                        if (this.relationMixedCost.length == 0) {
                            this.$message({
                                type: "error",
                                message: "请选择相关费用信息"
                            });
                            this.dialogInfo.btLoading = false;
                            return
                        }
                        if (this.dialogInfo.type == "applyInvoice") {
                            this.dialogInfo.btLoading = false;
                            this.dialogInfo.visible = false;

                            this.dialogInfo.width = "900px";
                            this.dialogInfo.type = "invoiceconfirm";
                            this.dialogInfo.visible = true;

                            let historyData = new FormData();
                            historyData.append('group_id', this.filterInfo2.query.group_id)
                            getHistoryInvoice(historyData).then(res => {
                                if (res.status == 200) {
                                    this.historyInfo = res.data.invoice_list
                                    if (res.data.invoice_list.length != 0){
                                        this.invoiceForm.name = res.data.invoice_list[0].name
                                        this.invoiceForm.tax_number = res.data.invoice_list[0].tax_number
                                        this.invoiceForm.address = res.data.invoice_list[0].address
                                        this.invoiceForm.bank_name = res.data.invoice_list[0].bank_name
                                        this.invoiceForm.bank_account = res.data.invoice_list[0].bank_account
                                    }else{
                                        this.invoiceForm.name = ''
                                        this.invoiceForm.tax_number = ''
                                        this.invoiceForm.address = ''
                                        this.invoiceForm.bank_name = ''
                                        this.invoiceForm.bank_account = ''
                                    }
                                }
                                })

                            this.tableInfo3.data = this.relationMixedCost
                            this.tax_list.forEach((v) => {
                                if (v.value == this.filterInfo2.query.invoice_type_id) {
                                    this.billTax = v.tax_ratio
                                    this.billType = v.type
                                }
                            })
                            if (this.billTax == 9) this.show = true
                            return
                        }

                        if (this.dialogInfo.type == "invoiceconfirm") {
                            if (this.billTax == 9 && (this.invoiceForm.car_number == '' || this.invoiceForm.start_address == ''
                                || this.invoiceForm.end_address == '' || this.invoiceForm.goods == ''
                            )) {
                                this.$message({
                                    type: "error",
                                    message: "发票信息不能为空！"
                                });
                                this.dialogInfo.btLoading = false;
                                return
                            }
                            if (this.filterInfo2.query.group_id == "") {
                                this.$message({
                                    type: "error",
                                    message: "发布企业不能为空！"
                                });
                                this.dialogInfo.btLoading = false;
                                return
                            }
                            this.dialogInfo.btLoading = false;
                            let invoiceData = new FormData();
                            invoiceData.append('settlement_time', this.filterInfo2.query.settlement_time)
                            invoiceData.append('amount', this.billAmount)
                            invoiceData.append('tax_ratio', this.billTax)
                            invoiceData.append('invoice_type', this.billType)


                            invoiceData.append('name', this.invoiceForm.name)
                            invoiceData.append('tax_number', this.invoiceForm.tax_number)
                            invoiceData.append('address', this.invoiceForm.address)
                            invoiceData.append('bank_name', this.invoiceForm.bank_name)
                            invoiceData.append('bank_account', this.invoiceForm.bank_account)

                            invoiceData.append('car_number', this.invoiceForm.car_number)
                            invoiceData.append('start_address', this.invoiceForm.start_address)
                            invoiceData.append('end_address', this.invoiceForm.end_address)
                            invoiceData.append('goods', this.invoiceForm.goods)
                            invoiceData.append('remark', this.invoiceForm.remark)
                            invoiceData.append('group_id', this.filterInfo2.query.group_id)
                            this.relationMixedCost.forEach(function (value, index) {
                                // 使用索引来构建字段的键，例如 'arrayField[0]'
                                invoiceData.append(`task[${index}][tc_id]`, value.tc_id);
                                invoiceData.append(`task[${index}][amount_type]`, value.amount_type);
                                invoiceData.append(`task[${index}][amount_info_id]`, value.amount_info_id);
                            });
                            confirmInvoice(invoiceData).then(res => {
                                if (res.status == 200) {
                                    this.$message({
                                        message: res.msg,
                                        type: "success"
                                    });
                                    this.init(this.filterInfo.query);
                                    this.dialogInfo.visible = false;
                                }
                            })
                                .catch(() => {

                                });
                        }

                    }
                    if (this.dialogInfo.type == "billInfo") {
                        this.dialogInfo.btLoading = false;
                        // this.dialogInfo.visible = false;
                        this.dialogInfo.visible = false;
                    }

                    break;
                case "close":
                    this.dialogInfo.btLoading = false;
                    this.dialogInfo.visible = false;
                    this.is_modify_tax = 0
                    this.modifyTaxRadioForm.tax_ratio = ''
                    this.modifyTaxRadioForm.modify_freight = ''
                    break;
                case "close-two":
                    this.dialogInfo.btLoading = false;
                    this.dialogInfo.visible = false;
                    break;
            }
        },
        handleEvent (event, data, label) {
            let datas = {};
            switch (event) {
                case "tableCheck":
                    if (data.length > 0) {
                        data.forEach((v) => {
                            if (this.relationMixedCost.length > 0) {
                                let checkStatus = 0;
                                this.relationMixedCost.forEach((item) => {
                                    if (v.tc_id + '_' + v.amount_info_id === item.id) {
                                        checkStatus = 1;

                                    }
                                })
                                if (checkStatus != 1) {
                                    this.relationMixedCost.push({
                                        name: v.bill_lading_number + ' ' + v.amount_type_text + '：' + v.amount,
                                        type: 'info',
                                        tc_id: v.tc_id,
                                        bill_lading_number: v.bill_lading_number,
                                        container: v.container,
                                        amount_type_text: v.amount_type_text,
                                        amount_type: v.amount_type,
                                        amount: v.amount,
                                        tax_ratio: v.tax_ratio,
                                        id: v.tc_id + '_' + v.amount_info_id,
                                        amount_info_id: v.amount_info_id
                                    })
                                    this.billAmount += +v.amount
                                }
                            } else {
                                this.relationMixedCost.push({
                                    name: v.bill_lading_number + ' ' + v.amount_type_text + '：' + v.amount,
                                    type: 'info',
                                    tc_id: v.tc_id,
                                    bill_lading_number: v.bill_lading_number,
                                    container: v.container,
                                    amount_type_text: v.amount_type_text,
                                    amount_type: v.amount_type,
                                    amount: v.amount,
                                    tax_ratio: v.tax_ratio,
                                    id: v.tc_id + '_' + v.amount_info_id,
                                    amount_info_id: v.amount_info_id
                                })
                                this.billAmount += +v.amount
                            }

                        })
                    } else {
                        this.relationMixedCost = []
                        this.billAmount = 0
                        this.checked = false
                    }

                    this.addId = [];
                    if (data.length > 0) {
                        let newRelationMixedCost = [];
                        this.billAmount = 0
                        data.forEach((v) => {
                            this.addId.push(v.tc_id);
                            if (this.filterInfo2.query.expense_id == 0) {
                                this.relationMixedCost.forEach((item) => {
                                    if (item.tc_id == v.tc_id) {
                                        newRelationMixedCost.push(item)
                                        this.billAmount += +item.amount
                                    }
                                })
                            } else {
                                this.relationMixedCost.forEach((item) => {
                                    if (item.amount_info_id == v.amount_info_id) {
                                        newRelationMixedCost.push(item)
                                        this.billAmount += +item.amount
                                    }
                                })
                            }
                        })
                        this.relationMixedCost = newRelationMixedCost
                    }
                    break;
                case "rowClick":
                    break;
                case "search":
                    console.log('333333')
                    this.pageParm.query.page = 1;
                    this.filterInfo.query.page = 1;
                    this.init(this.filterInfo.query);
                    break;
                // 分页改变当前页
                case "curPage":
                    if (!data) return;
                    this.pageParm.query.page = data;
                    this.filterInfo.query.page = data;
                    datas = Object.assign({}, this.pageParm.query, this.filterInfo.query);
                    this.init(datas);
                    break;
                // 分页列表
                case "pageSize":
                    if (!data) return;
                    this.pageParm.query.limit = data;
                    this.filterInfo.query.limit = data;
                    this.pageParm.query.page = 1;
                    this.filterInfo.query.page = 1;
                    datas = Object.assign({}, this.pageParm.query, this.filterInfo.query);
                    this.init(datas);
                    break;
                default:
                    break;
            }
        },
    },
    // destroyed () {
    //     window.removeEventListener("resize", this.getHeight);
    // }
};
</script>
<style lang="scss">
.taskList_box_title {
    padding-bottom: 20px;
    line-height: 40px;
}

.taskList_box {
    width: 600px;
    height: 500px;
    overflow-y: auto;
    border: 1px solid #ddd;
    margin-right: -10px;
    border: 1px solid #ddd;
    line-height: 47px;
    width: 623px;

    .el-col {
        height: 60px;
        line-height: 40px;
        padding: 10px 0;

        .el-input-number {
            width: 140px;
        }
    }
}

/* 去掉input尾部上下小箭头 start */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -o-appearance: none !important;
    -ms-appearance: none !important;
    appearance: none !important;
    margin: 0;
}

input[type="number"] {
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    -o-appearance: textfield;
    -ms-appearance: textfield;
    appearance: textfield;
}

/* 去掉input尾部上下小箭头 end */
</style>
<style lang="scss" scoped>
.icon-box {
    display: inline-block;
    font-size: 12px;
    margin-left: 10px;

    span {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        text-align: center;
        line-height: 20px;
        color: #fff;
    }
}


.filtrate {
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    background-color: #409eff;
    color: #ffffff;
    box-shadow: -1px 1px 4px 0 #f6900f;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 2;
}

.filtrate:hover {
    cursor: pointer;
}

::v-deep .receivable {
    margin-left: 33px;
}

::v-deep .moneycss {
    width: 120px;
}

.editicon:hover {
    cursor: pointer;
}

.imgggcss {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.excelcss:hover {
    cursor: pointer;
}

::v-deep .excelcss>.el-image__inner {
    vertical-align: middle;
}

.salecss {
    white-space: nowrap;
    /*强制span不换行*/
    display: inline-block;
    /*将span当做块级元素对待*/
    width: 60px;
    /*限制宽度*/
    overflow: hidden;
    /*超出宽度部分隐藏*/
    text-overflow: ellipsis;
    /*超出部分以点号代替*/
    line-height: 0.9;
    /*数字与之前的文字对齐*/
}

.salecss:hover {
    cursor: pointer;
}

.recordTable {
    display: flex;
    flex-direction: column;
}

.concatcss {
    padding-top: 10px;
    padding-left: 10px;
    margin-bottom: 20px;
    position: relative;
    margin-top: 10px;
}

.concatcss_line {
    width: 360px;
    border: 1px dashed #c8b9b9;
}

::v-deep.el-form-item {
    margin-bottom: 0px;
}

::v-deep.el-form-item>.el-form-item__label {
    font-size: 12px;
}

::v-deep.el-input--medium .el-input__inner {
    height: 30px;
    line-height: 30px;
    font-size: 12px;
}

.moredestroyCss {
    ::v-deep.el-form-item {
        margin-bottom: 20px !important;
    }

    ::v-deep .el-input {
        width: 240px !important;
    }

    ::v-deep .el-input__inner {
        width: 240px !important;
    }

    .item {
        width: 330px;
        margin-top: 15px;

        &-title {
            font-size: 13px;
            color: #9BA2AA;
            padding-left: 15px;
            padding-bottom: 5px;
        }

        &-main {
            padding: 10px 15px;
            box-sizing: border-box;
            border-radius: 4px;
            border: 1px dashed #000;

            &-line {
                display: flex;
                align-items: center;
                height: 40px;
                line-height: 40px;
            }

            &-title {
                width: 80px;
                color: #606266;
                font-size: 12px;
                font-weight: 700;

            }

            &-box {
                font-size: 12px;
                color: #606266;

                ::v-deep .el-input__inner {
                    width: 200px !important;
                }

                ::v-deep .el-input {
                    width: 200px !important;
                }
            }
        }
    }
}

.bgfff {
    background: #fff;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.bgfffs {
    background: #fff;
}

.tableHeight {
    flex: 1;
    box-sizing: border-box;
}

.filter_box {
    position: relative;
    // height: 64px;
    overflow: hidden;
    padding-right: 10px;

    .open {
        position: absolute;
        top: 10px;
        right: 20px;
        color: #409EFF;
        cursor: pointer;
    }
}

.app-main {
    padding-top: 90px !important;
}

.container-box {
    background: #f5f7fa;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}

::v-deep .pagination-container {
    margin-top: 0 !important;
}

.addicon {
    color: #409eff;
    font-size: 20px;
    vertical-align: middle;
}

.addicon:hover {
    cursor: pointer;
}

.plant-item-left {
    &::v-deep .el-textarea__inner {
        border: none !important;
    }
}

.item-left-info {
    width: 252px;
    height: 46px;
    /* line-height: 46px; */
    padding: 0 12px 0 32px;
    border-radius: 6px;
    box-sizing: border-box;
    background-color: rgb(237, 248, 255);
    border: 1px solid rgb(205, 225, 255);
    font-size: 12px;
    color: rgb(29, 33, 41);
    font-family: PingFang SC;
    font-weight: 400;
    position: relative;
    margin-bottom: 8px;
}

.height-center {
    margin-top: 7.5px;
}

.item-left-address {
    width: 252px;
    // height: 116px;
    height: auto;
    border-radius: 6px;
    background-color: #fff;
    border: 1px dashed rgb(138, 174, 255);
}

.hint {
    position: absolute;
    left: 10px;
    top: 7px;
}

/* 自定义滚动条样式 */
::v-deep .el-textarea__inner::-webkit-scrollbar {
    width: 4px;
    /* 滚动条宽度 */
}

::v-deep .el-textarea__inner::-webkit-scrollbar-thumb {
    background-color: #ccc;
    /* 滚动条滑块颜色 */
    border-radius: 4px;
    /* 滚动条滑块圆角 */
}

::v-deep .el-textarea__inner::-webkit-scrollbar-thumb:hover {
    background-color: #999;
    /* 滚动条滑块悬停颜色 */
}

::v-deep .el-textarea__inner::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* 滚动条轨道颜色 */
}

::v-deep .el-textarea__inner {
    border-radius: 6px !important;
    height: 155px !important;
}
</style>